<template>
  <div class="order-container">
    <div class="order-header">
      <h2 class="title">历史订单</h2>
      <div class="total-orders">共 {{ totalOrders }} 笔订单</div>
    </div>

    <!-- 订单列表 -->
    <div class="order-list">
      <div v-for="order in paginatedOrders" :key="order.id" class="order-card">
        <div class="order-header">
          <div class="order-meta">
            <span class="order-id">订单号：{{ order.id }}</span>
            <span class="order-date">{{ order.date }}</span>
          </div>
          <el-tag :type="statusType[order.status]" effect="light">
            {{ order.status }}
          </el-tag>
        </div>

        <div class="order-body">
          <div class="product-list">
            <div v-for="item in order.items" :key="item.id" class="product-item">
              <img :src="item.image" class="product-image" />
              <div class="product-info">
                <div class="product-name">{{ item.name }}</div>
                <div class="product-spec">规格：{{ item.spec }}</div>
                <div class="product-price">¥{{ item.price }} x {{ item.quantity }}</div>
              </div>
            </div>
          </div>

          <div class="order-footer">
            <div class="total-amount">实付金额：<span>¥{{ order.total }}</span></div>
            <div class="actions">
              <el-button type="primary" plain @click="viewDetail(order)">查看详情</el-button>
              <el-button v-if="order.status === '待付款'" type="danger">立即支付</el-button>
              <el-button v-if="order.status === '已发货'" type="success">确认收货</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalOrders"
      :page-size="pageSize"
      @current-change="handlePageChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface OrderItem {
  id: string
  name: string
  spec: string
  price: number
  quantity: number
  image: string
}

interface Order {
  id: string
  date: string
  status: '已完成' | '待付款' | '已发货' | '已取消'
  items: OrderItem[]
  total: number
}

// 模拟订单数据
const orders = ref<Order[]>([
  {
    id: '202308210001',
    date: '2023-08-21 14:30:00',
    status: '已完成',
    total: 299.0,
    items: [
      {
        id: 'p001',
        name: '男士商务衬衫',
        spec: '深蓝色 L',
        price: 199,
        quantity: 1,
        image: 'https://dummyimage.com/80x80/eee/999'
      },
      {
        id: 'p002',
        name: '真皮腰带',
        spec: '黑色 120cm',
        price: 100,
        quantity: 1,
        image: 'https://dummyimage.com/80x80/eee/999'
      }
    ]
  },
  // 更多模拟数据...
])

const statusType = {
  '已完成': 'success',
  '待付款': 'danger',
  '已发货': 'primary',
  '已取消': 'info'
}

// 分页相关
const currentPage = ref(1)
const pageSize = 5
const totalOrders = computed(() => orders.value.length)
const paginatedOrders = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  return orders.value.slice(start, start + pageSize)
})

const handlePageChange = (page: number) => {
  currentPage.value = page
}

const viewDetail = (order: Order) => {
  console.log('查看订单详情:', order)
}
</script>

<style scoped>
.order-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.order-header {
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 24px;
  color: #303133;
  margin: 0;
}

.total-orders {
  color: #909399;
}

.order-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  margin-bottom: 16px;
  padding: 20px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

.order-id {
  font-weight: 500;
  margin-right: 16px;
}

.order-date {
  color: #909399;
  font-size: 14px;
}

.product-list {
  margin-bottom: 16px;
}

.product-item {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #f5f7fa;
}

.product-item:last-child {
  border-bottom: none;
}

.product-image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
}

.product-info {
  flex: 1;
}

.product-name {
  font-weight: 500;
  margin-bottom: 8px;
}

.product-spec {
  color: #909399;
  font-size: 14px;
  margin-bottom: 4px;
}

.product-price {
  color: #606266;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

.total-amount span {
  font-size: 18px;
  color: #f56c6c;
  font-weight: 600;
}

.actions {
  display: flex;
  gap: 12px;
}

.el-pagination {
  margin-top: 24px;
  justify-content: center;
}
</style>